import React from "react";
import { Tag } from "antd";

import { useDelete } from "./useDelete";
import { useForm } from "./useForm";
import {
  AuthEdit,
  AuthDelete,
  AuthCreateSub
} from "../../../components/AuthArea";

export const useColumns = () => {
  const { handleDelete } = useDelete();
  const { handleCreateSub, handleEdit } = useForm();

  const columns = [
    {
      title: "权限描述",
      dataIndex: "description",
      key: "description"
    },
    {
      title: "权限名称",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "权限类型",
      dataIndex: "type",
      key: "type",
      render: type => (
        <span>
          {type === "MENU" && <Tag color="green">菜单</Tag>}
          {type === "QUERY" && <Tag color="blue">查询</Tag>}
          {type === "MUTATION" && <Tag color="orange">变更</Tag>}
        </span>
      )
    },
    {
      title: "权限路径",
      dataIndex: "path",
      key: "path"
    },
    {
      title: "创建时间",
      dataIndex: "dateCreated",
      key: "dateCreated"
    },
    {
      title: "更新时间",
      dataIndex: "dateUpdated",
      key: "dateUpdated"
    },
    {
      title: "操作",
      key: "action",
      render: (text, record) => (
        <span>
          {record.type === "MENU" && (
            <AuthCreateSub
              auth="AUTH_SYS_AUTHORITY_CREATE"
              record={record}
              handleCreateSub={handleCreateSub}
            />
          )}
          <AuthEdit
            auth="AUTH_SYS_AUTHORITY_UPDATE"
            record={record}
            handleEdit={handleEdit}
          />
          {!record.isSystem && (
            <AuthDelete
              auth="AUTH_SYS_AUTHORITY_DELETE"
              record={record}
              handleDelete={handleDelete}
            />
          )}
        </span>
      )
    }
  ];

  return {
    columns
  };
};
